<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监控视频</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/videoWall.css">
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="videoWall" class="videoWall-box common-box">
        <div class="video_box" v-for="(item,i) in videoList" :key="i" :id="'video'+i"></div>
        <div class="video_box nourl" v-for="i in (6 - videoList.length)">
            暂无数据源
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		
	</script>
    <script>
        var videoWall = new Vue({
            el: '#videoWall',
            data() {
                return {
                    videoList: [],
                    videoFn: []
                }
            },
            created() {

            },
            mounted() {
                this.getVideoList()
            },
            methods: {
                getVideoList() {
                    api.getVidedoList().then(res => {
                        if(res.data.status == 'success') {
                            this.videoList = res.data.data;
                            setTimeout(() => {
                                for (let index = 0; index < this.videoList.length; index++) {
                                    this.setVideo(this.videoList[index].url,index)
                                }
                            },1000)
                        }
                    })
                },

                setVideo(videoUrl,id) {
                    var videoObject = {
                        container: '#video'+id, //容器的ID或className
                        // container: '#video0',
                        variable: 'player', //播放函数名称
                        autoplay: true,//是否自动播放
                        // video: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
                    };
                    
                    var player = new ckplayer(videoObject);
                    this.videoFn.push(player);
                    this.videoPlay(videoUrl,id)
                },

                videoPlay(videoUrl,id) {
                    let player = this.videoFn[id];
                    if(player == null) {
                        return;
                    }
            
                    var newVideoObject = {
                        container: '#video' + id, //容器的ID
                        // container: '#video0',
                        variable: 'player',
                        autoplay: true, //是否自动播放
                        // loaded: 'loadedHandler', //当播放器加载后执行的函数
                        video: videoUrl
                    }
                    //判断是需要重新加载播放器还是直接换新地址
                    if(player.playerType == 'html5video') {
                        if(player.getFileExt(videoUrl) == '.flv' || player.getFileExt(videoUrl) == '.m3u8' || player.getFileExt(videoUrl) == '.f4v' || videoUrl.substr(0, 4) == 'rtmp') {
                            player.removeChild();
                            player = null;
                            player = new ckplayer();
                            player.embed(newVideoObject);
                        } else {
                            player.newVideo(newVideoObject);
                        }
                    } else {
                        if(player.getFileExt(videoUrl) == '.mp4' || player.getFileExt(videoUrl) == '.webm' || player.getFileExt(videoUrl) == '.ogg') {
                            player = null;
                            player = new ckplayer();
                            player.embed(newVideoObject);
                        } else {
                            player.newVideo(newVideoObject);
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>